'use client'

import Link from 'next/link'
import { Card, CardContent, CardFooter } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { SafeImage } from '@/components/ui/safe-image'
import { FavoriteButton } from '@/components/favorites/favorite-button'
import { ExternalLink, Heart, Star, User, Clock, CheckCircle } from 'lucide-react'
import { formatRelativeTime, truncateText } from '@/utils'
import type { Tool, Category, User as UserType } from '@/types'

interface ToolCardProps {
  tool: Tool & {
    category: Category
    user: Pick<UserType, 'name' | 'avatar'>
    _count?: {
      reviews: number
      favorites: number
    }
  }
}

export function ToolCard({ tool }: ToolCardProps) {
  const handleVisit = () => {
    // 在新标签页中打开工具链接
    window.open(tool.url, '_blank', 'noopener,noreferrer')
  }

  return (
    <Card className="group hover:shadow-lg transition-shadow duration-200">
      <CardContent className="p-6">
        {/* 工具图片 */}
        <div className="aspect-video bg-gray-100 rounded-lg mb-4 overflow-hidden">
          <SafeImage
            src={tool.image}
            alt={tool.title}
            width={300}
            height={200}
            className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200"
          />
        </div>

        {/* 工具信息 */}
        <div className="space-y-3">
          <div>
            <div className="flex items-center gap-2 mb-1">
              <h3 className="font-semibold text-lg text-gray-900 group-hover:text-blue-600 transition-colors">
                {tool.title}
              </h3>
              {tool.status === 'PENDING' && (
                <span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
                  <Clock className="h-3 w-3 mr-1" />
                  待审核
                </span>
              )}
              {tool.status === 'APPROVED' && tool.isDeployed && (
                <span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
                  <CheckCircle className="h-3 w-3 mr-1" />
                  已发布
                </span>
              )}
            </div>
            <p className="text-sm text-gray-600 mt-1">
              {truncateText(tool.description, 100)}
            </p>
          </div>

          {/* 分类标签 */}
          <div className="flex items-center gap-2">
            <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
              {tool.category.name}
            </span>
          </div>

          {/* 统计信息 */}
          <div className="flex items-center gap-4 text-sm text-gray-500">
            <div className="flex items-center gap-1">
              <Star className="h-4 w-4" />
              <span>{tool._count?.reviews || 0}</span>
            </div>
            <div className="flex items-center gap-1">
              <Heart className="h-4 w-4" />
              <span>{tool._count?.favorites || 0}</span>
            </div>
          </div>

          {/* 发布者信息 */}
          <div className="flex items-center gap-2 text-sm text-gray-500">
            <User className="h-4 w-4" />
            <span>by {tool.user.name}</span>
            <span>•</span>
            <span>{formatRelativeTime(tool.createdAt)}</span>
          </div>
        </div>
      </CardContent>

      <CardFooter className="px-6 pb-6 pt-0">
        <div className="flex gap-2 w-full">
          <FavoriteButton
            toolId={tool.id}
            size="sm"
            variant="outline"
            showText={false}
          />
          <Link href={`/tools/${tool.id}`}>
            <Button
              variant="outline"
              size="sm"
              className="flex-1"
            >
              查看详情
            </Button>
          </Link>
          <Button
            size="sm"
            className="flex-1"
            onClick={handleVisit}
          >
            <ExternalLink className="h-4 w-4 mr-2" />
            访问
          </Button>
        </div>
      </CardFooter>
    </Card>
  )
}
